<template>
  <div class="scroll-wrapper" ref="scrollWrapper">
    <div
        class="scroll-content"
        :class="{ 'scroll-animation': isPlaying }"
    >
      <!-- 实现无缝滚动 -->
      <div
          v-for="(item, index) in detectList"
          :key="index"
          class="card"
          :class="{ active: activeIndex === index && isChose }"
          @click="setActive(index)"
      >
        <div class="card-header">
          <div class="date">{{ item.alertDate }}</div>
          <div class="status" :class="{ checked: item.isCheck === '是' }">
            {{ item.isCheck === '是' ? '已核查' : '未核查' }}
          </div>
        </div>

        <div class="video-container">
          <video
              :src="item.videoUrl"
              class="video-thumbnail"
              muted
              playsinline
          ></video>
          <div class="play-overlay" v-if="activeIndex !== index">
            <i class="fas fa-play"></i>
          </div>
        </div>

        <div class="card-footer">
          <div class="id">ID: {{ item.id }}</div>
          <button class="detail-btn" @click.stop="showDetail(item)">
            查看详情
          </button>
        </div>
      </div>

      <div
          v-for="(item, index) in detectList"
          :key="index + detectList.length"
          class="card"
          :class="{ active: activeIndex === index && isChose }"
          @click="setActive(index)"
      >
        <div class="card-header">
          <div class="date">{{ item.alertDate }}</div>
          <div class="status" :class="{ checked: item.isCheck === '是' }">
            {{ item.isCheck === '是' ? '已核查' : '未核查' }}
          </div>
        </div>

        <div class="video-container">
          <video
              :src="item.videoUrl"
              class="video-thumbnail"
              muted
              playsinline
          ></video>
          <div class="play-overlay" v-if="activeIndex !== index">
            <i class="fas fa-play"></i>
          </div>
        </div>

        <div class="card-footer">
          <div class="id">ID: {{ item.id }}</div>
          <button class="detail-btn" @click.stop="showDetail(item)">
            查看详情
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 视频展示区 -->
  <div class="active-video-container" v-if="activeVideo">
    <video
        :src="activeVideo.videoUrl"
        ref="activeVideoPlayer"
        controls
        autoplay
        class="active-video"
    ></video>
    <div class="video-info">
      <h3>{{ activeVideo.alertDate }}</h3>
      <p>状态: {{ activeVideo.isCheck === '是' ? '已核查' : '未核查' }}</p>
      <button class="close-btn" @click="closeVideo">
        <i class="fas fa-times"></i> 关闭
      </button>
    </div>
  </div>

  <!-- 详情弹窗 -->
  <div class="modal-overlay" v-if="showModal" @click.self="closeModal">
    <div class="modal">
      <div class="modal-header">
        <h3>监测详情</h3>
        <button class="modal-close" @click="closeModal">
          <i class="fas_fa-times">
            <img src="@/assets/close-l.png" alt="关闭图标" style="width: 30px"/>
          </i>
        </button>
      </div>
      <div class="modal-body">
        <div class="detail-item">
          <span class="detail-label">ID:</span>
          <span class="detail-value">{{ modalData.id }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">监测时间:</span>
          <span class="detail-value">{{ modalData.detectDate }}</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">监测公司</span>
          <p>{{modalData.companyName}}</p>
        </div>
        <div class="detail-item">
          <span class="detail-label">核查状态:</span>
          <span class="detail-value" :class="modalData.isCheck === '是' ? 'checked' : 'unchecked'">
              {{ modalData.isCheck === '是' ? '已核查' : '未核查' }}
            </span>
        </div>
        <div class="detail-item">
          <span class="detail-label">监测地点:</span>
          <p>{{modalData.address}}</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="modal-btn confirm-btn" @click="closeModal">确定</button>
        <button class="modal-btn cancel-btn" @click="closeModal">取消</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, onMounted, onBeforeUnmount} from 'vue'

// 视频导入
import test1 from "@/assets/video/test1.mp4";
import test2 from "@/assets/video/test2.mp4";
import test3 from "@/assets/video/test3.mp4";
import test4 from "@/assets/video/test4.mp4";
import test5 from "@/assets/video/test5.mp4";
import test6 from "@/assets/video/test6.mp4";


// 默认视频数据
const defaultData = [
  { id: "detect1", videoUrl: test1, companyName: "智能鸟类监测公司", detectDate: "2025-2-05 08:30:00", isCheck: "否", address: "湿地公园监测点" },
  { id: "detect2", videoUrl: test2, companyName: "智能鸟类监测公司", detectDate: "2025-3-15 09:15:00", isCheck: "是", address: "湖泊观测站" },
  { id: "detect3", videoUrl: test3, companyName: "智能鸟类监测公司", detectDate: "2025-3-20 10:20:00", isCheck: "否", address: "森林保护区监测点" },
  { id: "detect4", videoUrl: test4, companyName: "智能鸟类监测公司", detectDate: "2025-3-05 11:45:00", isCheck: "是", address: "山区监测站" },
  { id: "detect5", videoUrl: test5, companyName: "智能鸟类监测公司", detectDate: "2025-2-05 13:10:00", isCheck: "否", address: "鸟类保护区东站" },
  { id: "detect6", videoUrl: test6, companyName: "智能鸟类监测公司", detectDate: "2025-3-18 13:15:00", isCheck: "否", address: "湿地西观测点" },
];

// 从localStorage获取数据
const getDeteData = () => {
  try {
    const storedData = localStorage.getItem('deteData');
    if (storedData) {
      return JSON.parse(storedData);
    }
  } catch (e) {
    console.error('Error parsing deteData', e);
  }
  return [...defaultData];
};

const detectList = ref(getDeteData());
const scrollList = ref([]);

// 生成滚动列表
const generateScrollList = () => {
  const list = [];
  detectList.value.forEach((item, index) => {
    list.push({ ...item, realIndex: index, uniqueKey: `original-${index}` });
  });
  detectList.value.forEach((item, index) => {
    list.push({ ...item, realIndex: index, uniqueKey: `clone-${index}` });
  });
  return list;
};

// 新增：状态更新提示状态
const showUpdateIndicator = ref(false);

// 响应式状态
const activeIndex = ref(0)
const activeVideo = ref(null)
const isPlaying = ref(true)
const isChose = ref(false)
const activeVideoPlayer = ref(null)
const showModal = ref(false)
const modalData = ref(null)

// 初始化滚动列表
onMounted(() => {
  scrollList.value = generateScrollList();

  document.addEventListener('visibilitychange', handleVisibilityChange);
});

onBeforeUnmount(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});

// 页面可见性处理
const handleVisibilityChange = () => {
  isPlaying.value = !document.hidden;
};

// 核心新增功能：更新核查状态
const updateCheckStatus = (index) => {
  const realIndex = index % detectList.value.length;
  const item = detectList.value[realIndex];

  if (item.isCheck === "否") {
    // 更新状态
    item.isCheck = "是";

    // 显示更新提示
    showUpdateIndicator.value = true;
    setTimeout(() => {
      showUpdateIndicator.value = false;
    }, 3000);

    // 更新滚动列表（克隆数据也要同步）
    scrollList.value = generateScrollList();

    // 保存到localStorage
    localStorage.setItem('deteData', JSON.stringify(detectList.value));

    // 更新模态框数据（如果正在查看）
    if (showModal.value && modalData.value?.id === item.id) {
      modalData.value = { ...item };
    }

    return true; // 表示状态已更新
  }
  return false; // 状态未更新
};

// 设置激活项
const setActive = (index) => {
  isChose.value = true;
  const realIndex = index % detectList.value.length;
  activeIndex.value = realIndex;
  activeVideo.value = detectList.value[realIndex];

  // 调用状态更新函数
  updateCheckStatus(realIndex);

  if (activeVideoPlayer.value) {
    activeVideoPlayer.value.pause();
  }
};

// 关闭视频（确保完全停止）
const closeVideo = () => {
  if (activeVideoPlayer.value) {
    activeVideoPlayer.value.pause();
    activeVideoPlayer.value.currentTime = 0;
  }
  activeVideo.value = null}

// 显示详情弹窗
const showDetail = (item) => {
  modalData.value = item
  showModal.value = true
}

// 关闭详情弹窗
const closeModal = () => {
  showModal.value = false
}




</script>

<style scoped>

.scroll-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 15px 0;
}

.scroll-content {
  display: inline-flex;
  gap: 30px;
  padding: 0 20px;
  animation: scroll linear infinite;
  animation-duration: 30s;
  animation-play-state: running;
}

.scroll-content.scroll-animation {
  animation-play-state: running;
}

.scroll-content:not(.scroll-animation) {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.card {
  width: 280px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid #f0f0f0;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
}

.card.active {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(67, 97, 238, 0.2);
  border: 2px solid #4361ee;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-bottom: 1px solid #f0f0f0;
}

.date {
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

.status {
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: 20px;
  background: #fff0f0;
  color: #e74c3c;
  font-weight: 500;
}

.status.checked {
  background: #e8f7f0;
  color: #27ae60;
}

.video-container {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card:hover .video-thumbnail {
  transform: scale(1.05);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-overlay i {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.card:hover .play-overlay {
  opacity: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
  border-top: 1px solid #f0f0f0;
}

.id {
  font-size: 0.85rem;
  color: #6c757d;
  font-weight: 500;
}

.detail-btn {
  background: #4361ee;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 6px 15px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
}

.detail-btn:hover {
  background: #3a0ca3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.active-video-container {
  margin-top: 30px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.active-video {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.video-info {
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-top: 1px solid #f0f0f0;
}

.video-info h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #2c3e50;
  font-weight: 600;
}

.video-info p {
  margin: 0;
  color: #6c757d;
  font-weight: 500;
}

.close-btn {
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
}

.close-btn:hover {
  background: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

/* 详情弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  width: 600px;
  max-width: 90%;
  background: white;
  border-radius: 16px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: modalIn 0.4s ease;
}

@keyframes modalIn {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 20px 25px;
  background: #4361ee;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.modal-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-close:hover {
  transform: rotate(90deg);
}

.modal-body {
  padding: 25px;
}

.detail-item {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

.detail-label {
  width: 100px;
  font-weight: 600;
  color: #2c3e50;
}

.detail-value {
  flex: 1;
  color: #6c757d;
}

.detail-value.checked {
  color: #27ae60;
  font-weight: 600;
}

.detail-value.unchecked {
  color: #e74c3c;
  font-weight: 600;
}

.modal-video {
  width: 100%;
  height: 250px;
  border-radius: 8px;
  background: #000;
  margin-top: 10px;
}

.modal-footer {
  padding: 20px 25px;
  background: #f8f9fa;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.modal-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-btn {
  background: #4361ee;
  color: white;
  box-shadow: 0 2px 8px rgba(67, 97, 238, 0.2);
}

.confirm-btn:hover {
  background: #3a0ca3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.cancel-btn {
  background: #f8f9fa;
  color: #6c757d;
  border: 1px solid #e0e0e0;
}

.cancel-btn:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 992px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .active-video {
    height: 350px;
  }

  .scroll-content {
    gap: 20px;
  }

  .card {
    width: 260px;
  }

  .modal {
    width: 500px;
  }
}

@media (max-width: 768px) {
  .card {
    width: 240px;
  }

  .video-container {
    height: 140px;
  }

  .active-video {
    height: 300px;
  }

  .scroll-content {
    gap: 15px;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-video {
    height: 200px;
  }
}

@media (max-width: 576px) {
  .horizontal-scroll-container {
    padding: 20px;
  }

  .card {
    width: 220px;
  }

  .video-container {
    height: 120px;
  }

  .active-video {
    height: 250px;
  }

  .video-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .scroll-content {
    gap: 12px;
  }

  .detail-item {
    flex-direction: column;
    gap: 5px;
  }

  .detail-label {
    width: 100%;
  }

  .modal-footer {
    flex-direction: column;
  }

  .modal-btn {
    width: 100%;
  }
}
</style>